---
title: Module
description: Learn how to setup Embla Carousel using vanilla JavaScript.
order: 0
date: 2021-02-21
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

# Module

Start by installing the **npm package** and save it to your dependencies:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

```shell
npm install embla-carousel --save
```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

```shell
yarn add embla-carousel
```

  </TabsItem>
</Tabs>

---

## The HTML structure

A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel:

```html
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

## Styling the carousel

The wrapping element with the classname `embla` is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:

```css
.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}
```

## Accessing the carousel API

Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](/api/).

```js highlight={7}
import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const options = { loop: false }
const emblaApi = EmblaCarousel(emblaNode, options)

console.log(emblaApi.slideNodes()) // Access API
```

## Adding plugins

Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

```shell
npm install embla-carousel-autoplay --save
```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

```shell
yarn add embla-carousel-autoplay
```

  </TabsItem>
</Tabs>

Embla Carousel accepts an optional **plugin array** as the third argument. Here's a basic example of how to make use of it:

```js highlight={6-7}
import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const emblaNode = document.querySelector('.embla')
const options = { loop: false }
const plugins = [Autoplay()]
const emblaApi = EmblaCarousel(emblaNode, options, plugins)
```

Congratulations! You just created your first Embla Carousel.
